<template>
  <div class="explame">
    <h4 class="red">hello shoule be red</h4>
    <h4 class="green">hello shoule be green</h4>
    <h4 class="yellow">hello shoule be yellow</h4>
  </div>
</template>

<script>
export default {
  name: 'vbind',
  data() {
    return {
      color1: 'red',
      color2: 'green'
    }
  },
  computed: {
    color3() {
      return 'yellow'
    }
  }
}
</script>

<style lang="scss" scoped>
.red {
  color: v-bind(color1);
}
.green {
  color: v-bind(color2);
}
.yellow {
  color: v-bind(color3);
}
</style>
